<!-- 首页 -->
<template>
  <div class="app-container">
    <div class="home">
      <!-- 第一模块 -->
      <!-- 数据概览标题 -->
      <el-row>
        <el-col :span="24">
          <div class="title">
            <h3 class="big-title">{{ $t('licence.homOverview') }}</h3>
            <div class="big-title-bg"></div>
          </div>
        </el-col>
      </el-row>
      <!-- 数据概览 -->
      <div class="dataOverview">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple box1">
              <h4 class="small-title">{{ $t('licence.homElectricity') }}</h4>
              <div class="content-b">
                <p class="number">{{ overviewList.electricity }}</p>
                <p class="img-t">
                  <img :src="util.getAssetsFile('index-pic01.png')" alt="" />
                </p>
              </div>
            </div>
          </el-col>

          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <h4 class="small-title">{{ $t('licence.homCumulative') }}</h4>
              <div class="content-b">
                <p class="number">{{ overviewList.cumulativeElectricity }}</p>
                <p class="img-t">
                  <img :src="util.getAssetsFile('index-pic02.png')" alt="" />
                </p>
              </div></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <h4 class="small-title">{{ $t('licence.homPower') }}</h4>
              <div class="content-b">
                <p class="number">{{ overviewList.totalInstalledPower }}</p>
                <p class="img-t">
                  <img :src="util.getAssetsFile('index-pic03.png')" alt="" />
                </p>
              </div></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <h4 class="small-title">{{ $t('licence.homTotalNum') }}</h4>
              <div class="content-b">
                <p class="number">{{ overviewList.totalNum }}</p>
                <p class="img-t">
                  <img :src="util.getAssetsFile('index-pic04.png')" alt="" />
                </p>
              </div></div
          ></el-col>
        </el-row>
      </div>
      <!-- 第二模块 -->
      <!-- 标题 -->
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="title">
            <h3 class="big-title">{{ $t('licence.homStatus') }}</h3>
            <div class="big-title-bg"></div></div
        ></el-col>
        <el-col :span="18"
          ><div class="title">
            <h3 class="big-title">{{ $t('licence.homFault') }}</h3>
            <div class="big-title-bg"></div>
          </div>
        </el-col>
      </el-row>
      <!-- 模块二内容 -->
      <div>
        <!-- 电站状态 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <ul class="status">
                <li class="status-list" @click="powerStateChanged(1)">
                  <span>
                    <span class="status-img">
                      <img :src="util.getAssetsFile('index-pic05.png')" alt="" />
                    </span>
                    <span class="status-title">{{ $t('licence.hom_type1') }}</span>
                  </span>
                  <span class="status-number">{{ stationStateList.normalNo }}</span>
                </li>

                <router-link to="/establishDianzhan" class="status-list">
                  <span>
                    <span class="status-img">
                      <img :src="util.getAssetsFile('index-pic06.png')" alt="" />
                    </span>
                    <span class="status-title">{{ $t('licence.homBuild') }}</span>
                  </span>
                  <span class="status-number">{{ stationStateList.incompleteNo }}</span>
                </router-link>

                <li class="status-list" @click="powerStateChanged(4)">
                  <span>
                    <span class="status-img">
                      <img :src="util.getAssetsFile('index-pic07.png')" alt="" />
                    </span>
                    <span class="status-title">{{ $t('licence.hom_type4') }}</span>
                  </span>
                  <span class="status-number">{{ stationStateList.abnormalNo }}</span>
                </li>
                <li class="status-list" @click="powerStateChanged(2)">
                  <span>
                    <span class="status-img">
                      <img :src="util.getAssetsFile('index-pic08.png')" alt="" />
                    </span>
                    <span class="status-title">{{ $t('licence.hom_type2') }}</span>
                  </span>
                  <span class="status-number">{{ stationStateList.faultNo }}</span>
                </li>
                <li class="status-list" @click="powerStateChanged(3)">
                  <span>
                    <span class="status-img">
                      <img :src="util.getAssetsFile('index-pic09.png')" alt="" />
                    </span>
                    <span class="status-title">{{ $t('licence.hom_type3') }}</span>
                  </span>
                  <span class="status-number">{{ stationStateList.offlineNo }}</span>
                </li>
              </ul>
            </div></el-col
          >
          <!-- 故障列表 -->
          <el-col :span="18">
            <div class="grid-content bg-purple fault">
              <el-table :data="faultData" stripe style="width: 100%" class="tableStyle">
                <el-table-column prop="num" :label="$t('licence.fau_num')" width="90"> </el-table-column>
                <el-table-column :label="$t('licence.stationName')" prop="stationName" width="200">
                  <template #default="scope">
                    <div style="cursor: pointer; color: #305add" @click="goToStation(scope.row)">
                      {{ scope.row.stationName }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="faultNo" :label="$t('licence.faultNo')" width="100"> </el-table-column>
                <el-table-column prop="faultDesc" :show-overflow-tooltip="true" :label="$t('licence.faultDesc')"> </el-table-column>
                <el-table-column prop="createTime" :label="$t('licence.createTime')" width="180">
                  <template #default="scope">
                    {{ format.FormatDate(scope.row.createTime) }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 第三模块 -->
      <!-- 电站列表标题 -->
      <el-row>
        <el-col :span="24">
          <div class="title">
            <h3 class="big-title">{{ $t('licence.stationList') }}</h3>
            <div class="big-title-bg"></div>
          </div>
        </el-col>
      </el-row>
      <!-- 电站列表 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <div style="margin-bottom: 20px">
              <!-- 查询功能 -->
              <!-- 国家 -->
              <el-select v-hasPermi="['index:powerstaion:show']" v-model="regionCode" :placeholder="$t('licence.guojia')" clearable @change="getadd" style="margin-right: 10px">
                <el-option v-for="item in country" :key="item.id" :label="lang == 1 ? item.regionNameEn : item.cityName" :value="item.id"> </el-option>
              </el-select>
              <!-- 电站地点 -->
              <el-cascader :placeholder="$t('licence.stationAdd')" v-model="label" :options="addOptions" clearable @change="addOptionsChanged"></el-cascader>
              <!-- 功率段 -->
              <el-select v-model="dict.dictLabel" :placeholder="$t('licence.gonglv')" style="margin: 0 10px" clearable @change="dictLabelChanged">
                <el-option v-for="dicts in sys_power_range" :key="dicts.label" :label="dicts.label" :value="dicts.label"> </el-option>
              </el-select>
              <!-- 状态 正常 -->
              <el-select v-model="powerState" :placeholder="$t('licence.status')" clearable @change="powerStateChanged">
                <el-option v-for="item in powerStateOptions" :key="item.key" :label="$t('licence.hom_type' + item.key)" :value="item.key"> </el-option>
              </el-select>
              <el-input style="width: 240px; margin: 0 10px" v-model="powerName" :placeholder="$t('licence.powerName')" clearable></el-input>
              <el-button type="primary" @click="onSubmit" v-preventReClick>{{ $t('licence.fau_Thequery') }}</el-button>
            </div>

            <!-- 电站列表============= -->
            <el-table v-loading="loading" :data="powerData" stripe style="width: 100%" class="tableStyle">
              <!-- 序号 -->
              <el-table-column align="center" prop="num" :label="$t('licence.fau_num')" width="80"> </el-table-column>
              <!-- 头像 -->
              <el-table-column align="center" :label="$t('licence.stationPicture')" width="100px">
                <template #default="scope">
                  <img :src="scope.row.avatarOss?scope.row.avatarOss:Imgurl + scope.row.avatar" style="height: 50px; width: 50px; border-radius: 4px" alt="" />
                </template>
              </el-table-column>
              <!-- 电站名称 -->
              <el-table-column align="center" :label="$t('licence.stationName')">
                <template #default="scope">
                  <div style="cursor: pointer; color: #305add" @click="goToStation(scope.row)">
                    {{ scope.row.stationName }}
                  </div>
                </template>
              </el-table-column>
              <!-- 逆变器数量 -->
              <el-table-column align="center" :label="$t('licence.ind_psNum')" prop="psNum" width="100"> </el-table-column>
              <!-- 装机功率 -->
              <el-table-column align="center" prop="installedCapacity" :label="$t('licence.installedPower')" width="130"> </el-table-column>
              <!-- 累计收益 -->
              <!-- <el-table-column prop="cumulativeIncome" :label="$t('licence.profit')">
              </el-table-column> -->
              <!-- 当前功率 -->
              <el-table-column align="center" prop="power" width="130" :label="$t('licence.dia_power')"> </el-table-column>
              <!-- 今日发电量 -->
              <el-table-column align="center" prop="electricity" width="180" :label="$t('licence.homElectricity')"> </el-table-column>
              <!-- 累计发电量 -->
              <el-table-column align="center" prop="cumulativeElectricity" width="210" :label="$t('licence.homCumulative')"> </el-table-column>
              <!-- 当前状态 -->
              <el-table-column align="center" prop="state" :label="$t('licence.currentState')" width="100">
                <template #default="scope">
                  <el-tag type="success" v-if="scope.row.state === 0" color="none">{{ $t('licence.hom_type1') }}</el-tag>
                  <el-tag type="danger" v-if="scope.row.state === 1">{{ $t('licence.hom_type2') }}</el-tag>
                  <el-tag type="info" v-if="scope.row.state === 2">{{ $t('licence.hom_type3') }}</el-tag>
                  <el-tag type="warning" v-if="scope.row.state === 3">{{ $t('licence.hom_type4') }}</el-tag>
                </template>
              </el-table-column>
              <!-- 运行时长 -->
              <el-table-column align="center" prop="days" :label="$t('licence.days')" width="120"> </el-table-column>
            </el-table>
            <!-- 分页区 -->
            <div class="block" style="margin: 20px">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryData.page"
                :page-size="queryData.pagesize"
                :page-sizes="[2, 4, 6, 8, 10]"
                layout="sizes, prev, pager, next,total, jumper"
                :total="queryData.total"
              ></el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="Index">
    import { getdataView, getstationState, getfaultList, getstationList, getAdds, getCountrys } from '@/api/homeIndex';
    import util from '@/utils/util';
    import format from '@/utils/format'
    import { useSettingsStore } from '@/store/modules/settings';
    import { useStationStore } from '@/store/modules/station';
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()
    const settingStore = useSettingsStore();
    const router = useRouter();
    const { proxy } = getCurrentInstance() as ComponentInternalInstance
    const { sys_power_range } = toRefs<any>(proxy?.useDict('sys_power_range'));//功率段
    const loading=ref(false);//加载状态
    const Imgurl=import.meta.env.VITE_IMG_BASE_API;
    const userInfo=ref({
      dept:{
        countryCode:''
      },
      superadmin:false
    });// 用户信息
    const overviewList = ref({
      electricity:'',
      cumulativeElectricity:'',
      totalInstalledPower:'',
      totalNum:'',
    });// 数据概览
    const stationStateList = ref({
      normalNo:'',
      incompleteNo:'',
      abnormalNo:'',
      faultNo:'',
      offlineNo:'',
    })// 电站状态
    const dict = ref({
      dictLabel:''
    })
    const faultData = ref([])// 故障列表
    const powerData = ref([])// 电站列表
    // 查询状态
    const powerStateOptions = ref([
        {key: 0},{key: 1},{key: 2},
        {key: 3},{key: 4}
    ]);
    const powerState=ref(0);//查询下拉绑定默认字段
    // 省市级
    const label = ref([]);
    const addOptions = ref([]);
    // const adress=ref('');
    const country = ref([{
      id:-1,
      regionNameEn:'',
      cityName:'',
    }]);//国家
    const regionCode=ref('');
    // s码 /电站名称
    const powerName=ref('');
    // 分页
    const queryData = reactive({
      page: 1,
      pagesize: 10,
      total: 0 as number
    });
    const lang=ref(0);
    onMounted(()=> {
        // 存到本地存储 header电站名和导航 显示与隐藏
        settingStore.setHeaderSum(3);
        // 获取用户信息
        userInfo.value = JSON.parse(localStorage.getItem('userInfo') as string);
        // 获取语言
        if (localStorage.getItem('locale') == 'en_US') {
          lang.value = 1;
        } else {
          lang.value = 0;
        }
        // 获取数据概览
        getoverviewList();
        // 获取电站状态
        getStationState();
        // 获取故障列表
        getFaultList();
        // 电站列表
        getpowerData();
        // 获取省市级
        getadd('');
        //获取国家
        getcountry();
    });
    // 获取国家
    const getcountry = async ()=> {
      let res = await getCountrys({});
      country.value = res.data;
    };
    // 省市级选择
    const getadd = async (value:any)=>{
      regionCode.value = value;
      let res = await getAdds({
        code: regionCode.value || userInfo.value?.dept.countryCode,
        // code:userInfo.value.dept.countryCode,
        lang: lang.value,
      });
      addOptions.value = res.data;
    };
    const goToStation = async(row:any)=> {
      // 存到本地存储
// ************************************************************************************************
      await useStationStore().setPowerInfo(row)
      // 在路由跳转之后，使用 window.location.reload() 刷新页面
      router.push({ name: 'Dianzhan', query: { page: 'Index' } })
      // emitter.emit('dianzhan-select', row.stationName)
    };
    // 获取数据概览
    const getoverviewList = async () => {
      let res = await getdataView({
        lang: lang.value,
      });
      overviewList.value = res.data;
    };
    // 获取电站状态
    const getStationState = async () =>{
      let res = await getstationState();
      stationStateList.value = res.data;
    };
    // 获取故障列表
    const getFaultList = async () => {
      let query = {
        lang: lang.value,
      };
      let res = await getfaultList(query);
      faultData.value = res.data;
    };
    // 获取电站列表
    const getpowerData = async () =>{
      loading.value = true;
      let query = {
        address: label.value?.join(','),
        power: dict.value.dictLabel,
        state: powerState.value - 1,
        searchValue: powerName.value,
        pageNum: queryData.page,
        pageSize: queryData.pagesize,
        country: regionCode.value,
      };
      let res = await getstationList(query);
      powerData.value  = res.rows;
      if(!localStorage.getItem("powerStation")&&powerData.value.length)
      await useStationStore().setPowerInfo(powerData.value[0])
      queryData.total = res.total;
      loading.value = false;
    };
    // 查询功能
    const onSubmit = ()=> {
      getpowerData();
    };
    // 地址下拉选择事件
    const addOptionsChanged = (value:any)=> {
      label.value = value;
      getpowerData();
    };
    // 功率段下拉选择事件
    const dictLabelChanged = (value:any)=>{
      dict.value.dictLabel = value;
      getpowerData();
    };
    // 状态下拉选择事件
    const powerStateChanged = (value:any)=> {
      powerState.value = value;
      getpowerData();
    };
    // 分页
    const handleSizeChange = (val:any)=>  {
      queryData.pagesize = val;
      getpowerData();
    };
    const handleCurrentChange = (val:any)=> {
      queryData.page = val;
      getpowerData();
    };
</script>

<style scoped lang="scss">
* {
  margin: 0;
  // padding: 0;
}
li {
  list-style: none;
}
.status {
  padding: 0;
}
//背景颜色
.app-container {
  background: url(../assets/images/index-bg.png) no-repeat !important;
  background-size: contain !important;
  background-color: #f5f5f5 !important;
  border-radius: 6px;
  position: relative;
  padding: 20px 0;
}
.home {
  box-sizing: border-box;
  max-width: 1400px;
  height: 100%;
  margin: auto;
  // 每个模块标题样式
  .title {
    margin: 20px 0 18px 0;
    .big-title-bg {
      position: absolute;
      bottom: 15px;
      z-index: -1;
      width: 70px;
      height: 10px;
      background: linear-gradient(270deg, rgba(48, 90, 221, 0) 0%, rgba(48, 90, 221, 0.81) 100%);
      border-radius: 7px;
    }
    .big-title {
      position: relative;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #0e1319;
    }
  }
  // 最上面四个盒子样式
  .grid-content {
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(3, 4, 24, 0.06);
    border-radius: 6px;
    padding: 20px 26px 20px 24px;
    .small-title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
    .content-b {
      display: flex;
      justify-content: space-between;
      .number {
        font-size: 36px;
        font-family: SamsungOne700;
        font-weight: bold;
        color: #0e1319;
        margin-top: 22px;
      }
      .img-t {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  // 第一个盒子样式
  .box1 {
    background: linear-gradient(135deg, #567fff 0%, #305add 100%);

    .small-title {
      color: #fff;
    }
    .number {
      color: #fff !important;
    }
  }

  .dataOverview .el-col>div{
      // box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease; /* 添加过渡动画效果 */
      &:hover {
        transform: translateY(-5px); /* 鼠标悬浮时向上移动 5 像素 */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* 提高阴影效果 */
      }
  }
  // 第二个模块的样式
  // 第二模块左边盒子电站状态
  .status {
    .status-list {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      background: #f8f9fb;
      border-radius: 6px;
      padding: 0 20px;
      margin-bottom: 20px;
      transition: all 0.3s ease; /* 添加过渡动画效果 */
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* 提高阴影效果 */
      &:hover {
        transform: translateY(-5px); /* 鼠标悬浮时向上移动 5 像素 */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* 提高阴影效果 */
      }
      &:last-child {
        margin-bottom: 0;
      }
      .status-img {
        vertical-align: middle;
        display: inline-block;
        width: 32px;
        height: 32px;
        // background: #3cf0a8;
        border-radius: 16px;
        // opacity: 0.2;
        margin-right: 12px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .status-title {
        color: #0e1319;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .status-number {
        font-family: SamsungOne700;
        font-weight: 900;
        color: #0e1319;
      }
    }
  }
  // 第二模块右边盒子 故障列表
  .fault {
    height: 360px;
    overflow: hidden;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none !important;
  }
  ::v-deep .el-table tr {
    height: 57px !important;
    box-sizing: border-box;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  ::v-deep .el-table td.el-table__cell {
    border: none !important;
  }
  ::v-deep .el-table .el-table__header-wrapper th {
    font-weight: 600;
    font-size: 14px;
    color: #0e1319;

    background: #f6f8fa;
  }
  // ::v-deep .el-table_1_column_2 {
  //   color: #305add;
  // }
  // ::v-deep .el-table_2_column_8 {
  //   color: #305add;
  // }
  // 故障描述超出一行隐藏
  ::v-deep .faultsDescribe {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  // 第三个模块电站列表
  // 查询下边距20px
  .demo-form-inline {
    margin-bottom: 20px;
  }
  // 查询样式 宽
  .select {
    width: 140px;
  }
  .selectbig {
    width: 210px;
  }
  // 查询按钮
  ::v-deep .el-button--primary {
    width: 70px;
    height: 36px;
    background: #305add;
    border-radius: 4px;
    border-color: #305add;
  }
  ::v-deep .el-input--medium .el-input__inner {
    border: none;
    background: #f6fafd;
    border-radius: 6px;
  }
  ::v-deep .el-input__inner {
    padding: 0 10px;
  }
  .block {
    // display: flex;
    display: -webkit-box;
    justify-content: end;
  }
}
</style>

<style>
.el-tooltip__popper {
  max-width: 40%;
}
</style>
